<template>
  <div v-if="nextTicketType.replace('dataset','')  !== 'halo'">
    <el-card class='box-card box-cardCustomer'>
      <div slot='header'
           class='clearfix'
           @click='changeArrow'>
        <img class='firstIcon'
             src='@/assets/ticket/initialDescriptions.png'>
        <span> {{ $t('custom.nextTicket.initialDescription') }}</span>
        <i :class='arrowCustomer'></i>
      </div>
      <el-collapse-transition v-if="nextTicketType.replace('dataset','')  === 'nextTicket'">
        <div v-show='showPanel'
             class='box-cardCustomer-content'>
          <el-row class='table1row' style="margin-bottom: 10px;">
            <div class='bluerow'>{{comDescriptionDataList?comDescriptionDataList.username?comDescriptionDataList.username:'':''}}
              {{comDescriptionDataList?comDescriptionDataList.createdTime?comDescriptionDataList.createdTime :'':'' | ClientFormat}}</div>
          </el-row>
          <el-row class='table1row' >
              <div class='textrow scroll-css'>
                <p style="white-space: pre-line;word-break: normal;" v-html="comDescriptionDataList?comDescriptionDataList.description:''"></p>
              </div>
          </el-row>
        </div>
      </el-collapse-transition>
      <el-collapse-transition v-else-if="nextTicketType.replace('dataset','')  === 'syncro'">
        <div v-show='showPanel'
             class='box-cardCustomer-content'>
          <el-row class='table1row' style="margin-bottom: 10px;">
            <div class='bluerow'>
              {{nextTicketInfo.entity?nextTicketInfo.entity.created_at?nextTicketInfo.entity.created_at :'':'' | ClientFormat}}</div>
          </el-row>
        </div>
      </el-collapse-transition>
      <el-collapse-transition v-else-if="nextTicketType.replace('dataset','')  === 'kaseyabms'">
        <div v-show='showPanel'
             class='box-cardCustomer-content'>
          <el-row class='table1row' style="margin-bottom: 10px;">
            <div v-if="nextTicketInfo.entity" class='bluerow' v-html="nextTicketInfo.entity.Details"></div>
          </el-row>
        </div>
      </el-collapse-transition>
      <el-collapse-transition v-else-if="nextTicketType.replace('dataset','')  === 'jira'">
        <div v-show='showPanel'
             class='box-cardCustomer-content'>
          <el-row class='table1row' style="margin-bottom: 10px;">
            <div v-if="nextTicketInfo.entity" class='bluerow' v-html="nextTicketInfo.entity.fields&&nextTicketInfo.entity.fields.status&&nextTicketInfo.entity.fields.status.description"></div>
          </el-row>
        </div>
      </el-collapse-transition>
      <el-collapse-transition v-else>
        <div v-show='showPanel'
             class='box-cardCustomer-content'>
          <el-row class='table1row' style="margin-bottom: 10px;">
            <div class='bluerow'>
              {{nextTicketInfo.entity?nextTicketInfo.entity.createDate?nextTicketInfo.entity.createDate :'':'' | ClientFormat}}</div>
            <div class='' style="white-space: pre-line;">
              <!-- {{JSON.stringify(nextTicketInfo)}} -->
              {{nextTicketInfo.entity&&nextTicketInfo.entity.description?nextTicketInfo.entity.description:''}}
              </div>
          </el-row>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>

export default {
  props: {
    nextTicketInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    nextTicketType: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      arrowCustomer: 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer',
      showPanel: true,
      activePannel: ['pannel'],
      activeNotesPannel: ['pannel'],
      notesDataList: [],
      timeEntryList: []
    }
  },

  computed: {
    comDescriptionDataList () {
      var descriptionList = []
      descriptionList = this._.sortBy(this._.filter(this.timeEntryList, { detailDescriptionFlag: true }), 'createdTime')
      return descriptionList[0]
    }
  },
  methods: {
    expanChangeClass (classname) {
      return classname === 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
        ? 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer'
        : 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
    },
    cardExpanChange () {
      this.arrowCustomer2 = this.expanChangeClass(this.arrowCustomer2)
      this.showPanel2 = !this.showPanel2
    },
    changeArrow () {
      this.arrowCustomer = this.expanChangeClass(this.arrowCustomer)
      this.showPanel = !this.showPanel
    },
    rowCardExpanChange (item) {
      item.arrowCustomer = this.expanChangeClass(item.arrowCustomer)
      item.showPanel = !item.showPanel
    },
    initData () {
      this.$nextTick(() => {
        if (this.nextTicketInfo.id) {
          this.getTimeEntryListData(this.nextTicketInfo.id)
        }
      })
    },
    getTimeEntryListData (ticketId) {
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        ticketId: ticketId
      }
      this.$interface.nextTicket.getTimeEntryDataListApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.timeEntryList = this.initTempTimeEntryList(res.data)
      })
    },
    initTempTimeEntryList (timeEntryList) {
      var temptimeEntryList = []
      for (let index = 0; index < timeEntryList.length; index++) {
        const element = timeEntryList[index]
        temptimeEntryList.push({
          createdTime: element.dateEntered ? element.dateEntered : '',
          username: element.memberName ? element.memberName : '',
          description: element.notes ? element.notes : '',
          detailDescriptionFlag: element.addToDetailDescriptionFlag ? element.addToDetailDescriptionFlag : ''
        })
      }
      return temptimeEntryList
    }
    // getNoteDataList (ticketId) {
    //   const params = {
    //     clientCode: this.$store.state.user.tenantCode,
    //     ticketId: ticketId
    //   }
    //   this.$interface.nextTicket.getNotesListApi(params).then(({ data: res }) => {
    //     if (res.code !== 0) {
    //       return this.$message.error(res.msg)
    //     }
    //     this.notesDataList = this.initTempNotesList(res.data)
    //   })
    // },
    // initTempNotesList (notesList) {
    //   var tempNotesList = []
    //   for (let index = 0; index < notesList.length; index++) {
    //     const element = notesList[index]
    //     tempNotesList.push({
    //       createdTime: element.dateCreated ? element.dateCreated : '',
    //       username: element.member ? element.member.name : '',
    //       description: element.text ? element.text : '',
    //       detailDescriptionFlag: element.detailDescriptionFlag ? element.detailDescriptionFlag : ''

    //     })
    //   }
    //   return tempNotesList
    // },
    // notesFormat (notes) {
    //   if (notes) {
    //     const tempData = notes.replace(/\n/gm, '<br/>')
    //     return this.notesFormatIncludingImg(tempData)
    //   } else {
    //     return ''
    //   }
    // },
    // notesFormatIncludingImg (inputData) {
    //   const allArr = inputData.split('==')
    //   if (allArr.length && allArr.length > 0) {
    //     const reg = new RegExp(/data:image\/.*;base64.*?==/)
    //     const reAllArr = allArr.map((item, index) => {
    //       if (index !== allArr.length - 1) {
    //         item = item + '=='
    //       }
    //       const base64Img = item.match(reg)
    //       if (base64Img && base64Img.length && base64Img.length > 0) {
    //         return item.replace(
    //           reg,
    //           `<img style='width:120px;height:74px;margin:4px;border-radius:3px;border:1px solid #ddd;box-shadow:0 0 5px #ddd;' src='${base64Img[0]
    //           }' />`
    //         )
    //       } else {
    //         return item
    //       }
    //     })
    //     return reAllArr.join()
    //   } else {
    //     return inputData
    //   }
    // }
  }
}
</script>
<style scoped>
.box-cardCustomer >>> .el-card__body {
  padding: 0px !important;
}
.box-cardCustomer >>> .el-card__header {
  cursor: pointer;
  height: 59px;
  padding: 18px 10px;
}
.firstIcon {
  height: 20px;
  width: 20px;
  margin-top: -4px;
}
.clearfix > span:nth-child(2) {
  margin-left: 10px;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.table1row {
  line-height: 30px;
  text-align: left;
}
.box-cardCustomer-content {
  padding: 20px 10px 20px 40px;
}
.clearfix {
  vertical-align: middle;
  text-align: left;
}
.el-icon-arrowCustomer {
  float: right;
  padding: 3px 0;
}
.bluerow {
  padding-left: 10px;
  vertical-align: middle;
  min-height: 30px;
  background: #e6f7ff;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 800;
  color: #138dc7;
}
.textrow {
  word-break: break-all;
  padding: 10px 10px;
  vertical-align: middle;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 400;
  max-height:350px;
  overflow:auto;

}

.spantitle {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
</style>
